<script setup>
import { useRoute } from 'vue-router'
import {onMounted, ref, reactive} from 'vue'
import router from "@/router/index.js";
import {get,post} from "@/net/index.js";
import {ElMessage} from "element-plus";

let interfaceInfo = ref({});
let interfaceInfoId = ref();
let userId = ref();
let userRequestParams = ref();
let requestResult = ref();
let requestParamsDesc = ref("");
let returnParamsDesc = ref("");
const loading = ref(false)


// 格式化时间
const formatDate = (dateTime) => {
    let date = new Date(dateTime);

    // 提取年、月、日
    let year = date.getFullYear();
    let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，并且确保两位数显示
    let day = date.getDate().toString().padStart(2, '0'); // 确保两位数显示

    // 拼接成所需的形式
    return `${year}-${month}-${day}`;
}
// 调用接口
const invokeInterfaceInfo = () => {
    loading.value = true;
    post('/api/interfaceInfo/invoke',
        {
            id: interfaceInfoId,
            userId: userId,
            userRequestParams: userRequestParams.value,
        },
        (data) => {
            loading.value = false;
            // 处理成功的情况
            requestResult.value = data;
        },
        (message, code, url) => {
            loading.value = false;
            console.warn(`请求地址：${url}，状态码：${code}，错误信息：${message}`)
            ElMessage.warning(message)
        }
    );
}
// 返回首页
const backToHome = () => {
    // 跳转到首页
    router.replace({path: '/apiShop'})
}

onMounted(() => {
    interfaceInfoId = useRoute().query.id;
    userId = useRoute().query.userId;

    get('/api/interfaceInfo/get/' + interfaceInfoId,
        (data) => {
            interfaceInfo.value = data;
            // 格式化时间
            interfaceInfo.value.createTime = formatDate(interfaceInfo.value.createTime)
            interfaceInfo.value.updateTime = formatDate(interfaceInfo.value.updateTime)
            userRequestParams.value = interfaceInfo.value.requestParams;
            requestParamsDesc.value = JSON.parse(interfaceInfo.value.requestParamsDesc);
            returnParamsDesc.value = JSON.parse(interfaceInfo.value.returnParamsDesc);
        }
    );
});
</script>

<template>
    <div class="interface-desc" v-loading="loading">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span style="font-weight: bold;font-size: 20px;color: #409EFF" v-text="interfaceInfo.name"></span>
                    <el-button type="primary" @click="backToHome">
                        <el-icon>
                            <Back/>
                        </el-icon>
                        返回
                    </el-button>
                </div>
            </template>
            <!--接口说明-->
            <div class="font-1">
                <el-row style="color: #909399">
                    <el-col :span="6">
                        描述：
                    </el-col>
                    <el-col :span="6">
                        接口状态：
                    </el-col>
                    <el-col :span="6">
                        接口路径：
                    </el-col>
                    <el-col :span="6">
                        请求地址：
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: black">
                    <el-col :span="6">
                        <span v-text="interfaceInfo.description"></span>
                    </el-col>
                    <el-col :span="6">
                        <el-tag size="large" v-if="interfaceInfo.status == 1" type="success">开启</el-tag>
                        <el-tag size="large" v-if="interfaceInfo.status == 0" type="danger">关闭</el-tag>
                    </el-col>
                    <el-col :span="6">
                        <span v-text="interfaceInfo.path"></span>
                    </el-col>
                    <el-col :span="6">
                        <span v-text="interfaceInfo.url"></span>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: #909399">
                    <el-col :span="6">
                        请求方法：
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: black">
                    <el-col :span="6">
                        <span style="color: #E6A23C" v-text="interfaceInfo.method"></span>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: #909399">
                    <el-col :span="6">
                        请求头：
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: black">
                    <el-col :span="12">
                        <el-tag style="font-size: 17px" v-text="interfaceInfo.requestHeader" type="primary"></el-tag>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: #909399">
                    <el-col :span="6">
                        响应头：
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: black">
                    <el-col :span="12">
                        <el-tag style="font-size: 17px" v-text="interfaceInfo.responseHeader" type="primary"></el-tag>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: #909399">
                    <el-col :span="6">
                        请求参数说明：
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px">
                    <el-col :span="13">
                        <el-table :data="requestParamsDesc" border stripe  style="font-size: 15px;width: 100%;color: black">
                            <el-table-column prop="parameter" label="参数名" width="150" />
                            <el-table-column prop="type" label="类型" width="100" />
                            <el-table-column prop="required" label="是否必填" />
                            <el-table-column prop="description" label="说明" width="450" />
                        </el-table>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: #909399">
                    <el-col :span="6">
                        返回参数说明：
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px">
                    <el-col :span="13">
                        <el-table :data="returnParamsDesc" border stripe style="font-size: 15px;width: 100%;color: black">
                            <el-table-column prop="parameter" label="参数名" width="150" />
                            <el-table-column prop="type" label="类型" width="100" />
                            <el-table-column prop="description" label="说明"/>
                        </el-table>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: #909399">
                    <el-col :span="6">
                        返回JSON试例：
                    </el-col>
                </el-row>

                <el-input style="margin-top: 15px;font-size: 15px;font-family: Arial;color: black;" :rows="5" :autosize="{ minRows: 2, maxRows: 20 }"
                          spellcheck="false"
                          v-model="interfaceInfo.jsonReturn"
                          type="textarea"/>

                <el-row style="margin-top: 15px;color: #909399">
                    <el-col :span="6">
                        创建时间：
                    </el-col>
                    <el-col :span="6">
                        更新时间：
                    </el-col>
                </el-row>

                <el-row style="margin-top: 15px;color: black">
                    <el-col :span="6">
                        <span v-text="interfaceInfo.createTime"></span>
                    </el-col>
                    <el-col :span="6">
                        <span v-text="interfaceInfo.updateTime"></span>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!--在线调试-->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span style="font-weight: bold;font-size: 20px;color: #409EFF">在线调试</span>
                </div>
            </template>
            <!--接口参数-->
            <div style="margin-bottom: 10px">
                <el-input spellcheck="false" :rows="5" v-model="userRequestParams" type="textarea"/>
            </div>
            <el-button type="primary" @click="invokeInterfaceInfo">
                <el-icon size="20" style="margin-right: 5px">
                    <MagicStick/>
                </el-icon>
                在线调试
            </el-button>
        </el-card>
        <!--调试结果-->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span style="font-weight: bold;font-size: 20px;color: #409EFF">调试结果</span>
                </div>
            </template>
            <!--接口参数-->
            <div>
                <el-input spellcheck="false" :rows="7" v-model="requestResult" type="textarea" :autosize="{ minRows: 5, maxRows: 50 }"/>
            </div>
        </el-card>
    </div>
</template>

<style scoped>
@font-face {
    font-family: "Sphere fez"; /* 定义字体名称 */
    src: url('/src/assets/font/spherefez-ezxam.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}

@font-face {
    font-family: "shangshou"; /* 定义字体名称 */
    src: url('/src/assets/font/上首简黑极细体.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}

.font-1 {
    font-weight: bold;
    font-size: 17px;
    font-family: shangshou;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-card {
    width: 97%;
    margin: 20px;
    box-shadow: 0 0 0 #cac6c6;
}
</style>